<template>
    <div class="detail">
        <div class="lottery whiteBlock">
            <div class="lotteryLi" style="border-bottom: 0;">
                <div class="lotteryTopType">
                    <div class="img">
                        <img :src="loginImg">
                    </div>
                    <div class="txt">
                        <h2>{{title}}</h2>
                        <p>
                            <span class="c333">{{pidData.pid}}期</span>
                            <span class="c999 ml30">{{pidData.atime.substring(0,10)}}&nbsp;{{DegetDate(pidData.atime.substring(0,10))}}</span>
                        </p>
                    </div>
                </div>
                <div class="lotteryBall">
                    <template v-if='pidData.code&&pidData.code.indexOf("|")>-1'>
                        <em v-for='num1 in pidData.code.split("|")[0].split(",")'>{{num1}}</em>
                        <em class="blue-ball" v-for='num2 in pidData.code.split("|")[1].split(",")'>{{num2}}</em>
                    </template>
                    <template v-else >
                        <em v-for='num3 in pidData.code.split(",")'>{{num3}}</em>
                    </template>
                </div>
                <p class="mt30" style="padding-top: .15rem; border-top: 1px solid #e3e3e3;">
                    <em>全国销量：</em>
                     <span v-html='numMoney(pidData.gsale)'></span>
                        </p>
                <p class="mt5">
                    <em>奖池滚存：</em>
                    <span v-html='numMoney(pidData.gpool)'></span>
                </p>
            </div>
        
        
            <div class="prizeList pb20 mt10">
                <table>
                    <tbody>
                        <tr>
                            <th width="23%">奖项</th>
                            <th width="45%">中奖注数</th>
                            <th width="35%">单注奖金</th>
                        </tr>
                        <tr v-for='(item,index) in pidData.ginfo.split(",")'>
                            <td class="td-leave">{{lotteryId[id][1]?(lotteryId[id][1].split('|')[index]):listTxt[index]}}</td>
                            <td class="td-zhu" v-if='pidData.ninfo'>{{pidData.ninfo.split(",")[index]}}注</td>
                            <td class="td-money"><span class="red">{{item}}</span>元</td>
                        </tr>
                    
                    </tbody>
                </table>
            </div>
            <a href="javascript:;" @click="showPopup" class="linkBtn">查看中奖条件</a>
        </div>
            <div class="mengceng" >
                <div class="mask" @click.stop='hidePidList' v-show='mengcengState'></div> 
                <div class="fix-box">
                    <div :class="mengcengState?'bottom-title show':'bottom-title'" @click='hidePidList'>
                        全部期数
                    </div> 
                    <div :class="mengcengState?'bottom-con':'bottom-con bottom-con-show'">
                        <ul>
                            <li v-for='(item,index) in pidList5' :key='index' @click='changePID(item.pid)'>
                                <div class="bot-time">
                                    <p class="bot-num">第{{item.pid}}期</p> 
                                </div> 
                            </li>
                        </ul>
                    </div> 
                </div>
            </div>
            <!-- 中奖条件 -->
            <div class="zjtj" v-show='zjtjState'>
                <div class="mask"></div>
                <div :class="zjtjState?'popup animate':'popup'">
                    <a href="javascript:;" class="close" @click="showPopup">×</a>
                    <div class="hd">中奖条件</div>
                    <div class="bd"><rule :lotteryId='id'></rule> </div>
                   <div class="btn"><a href="javascript:;" @click="showPopup">我知道了</a></div>
                </div>
            </div>
    </div>
</template>
<script>
import {getDate} from '@/assets/js/layout'
import {get} from '@/request/http'
import rule from "@/components/rule"
export default {
  name: 'detail',
  components: {
    rule
  },
  data(){
    return {
        title:'',
        id:'',
        pidData:{},
        mengcengState:false,
        pidList5:[],
        zxList:'50,51,52,53,01,03,07',
        zstList:'01,03,04,50,52,53,56',
        hotNewList4:'',
        listTxt:['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖','七等奖','八等奖'],
        zjtjState:false,
        loginImg:'',

    }
        
  },
  methods:{
    DegetDate(date){
        let week = getDate(date);
        return week
    },
    getPidData(id,pid){
        get('/cpdata/guoguan/'+id+'/'+pid+'/'+pid+'.json?_='+Math.random())
        .then(v=>{
            this.pidData = v.rows; 
        })
    },
    getHotNewList4(lottery){
        get('/discovery/v2/news/szc/'+lottery+'/index.json')
        .then(v=>{
            let data = v ;
            if (data.length>=1&&data.length > 4) {
                this.hotNewList4 = data.slice(0,5)
            }
            if (data.length>=1&&data.length < 4) {
                this.hotNewList4 = data
            }
        })
    },
    showPidList(){
        this.mengcengState = true;
    },
    hidePidList(){
        this.mengcengState = !this.mengcengState;
    },
    getPidList(id){
        get('/tdata/'+id+'/last_100.json').then(v=>{
            let data = v.period.row;
            this.pidList5 = data;
            this.getPidData(id,data[0].pid);
        })
    },
    goRecod(){
        this.$router.push('/record/'+this.id)
    },
    goExplain(id){
        let name = this.lotteryId[id][0];
        this.$router.push('/explain/'+this.id+'&'+name)
    },
    goInformation(id){
        this.$router.push('/information/'+this.id)
    },
    goZst(id){
        let url = this.keyUrl
        let lottery = {
            '01':["双色球", keyUrl+"/zst/v/ssq/201zs.do?vt=5"],
            '03':["福彩3D", keyUrl+"/zst/fc3d/hzzs.do?vt=5&clientType=0"],
            '04':["时时彩", keyUrl+"/zst/cqssc/yl/3xzhiyl.do?vt=5&clientType=0"],

            '50':["超级大乐透", keyUrl+"/zst/v/dlt/qqzs.do?vt=5"],
            '52':["排列五", keyUrl+"/zst/pl5.do?vt=5&clientType=0"],
            '53':["排列三", keyUrl+"/zst/pl3.do?vt=5&clientType=0"],
            '56':["十一运夺金", keyUrl+"/zst/sd11x5/r3mayl.do?vt=5&clientType=0"],
        }
        window.location.href = lottery[id][1];
    },
    goHotNew(url){
        this.$router.push({
            'name':'newsDetail',
            'params':{
                'url':url
            }
        })
        // window.location.href = 'http://m.178ty.com'+url
    },
    changePID(PID){
        this.mengcengState = false;
        this.getPidData(this.id,PID)
    },
    baiduInfo(){

    },
    showPopup(){
        this.zjtjState = !this.zjtjState
    },
    numMoney(val){
        let y = Math.floor(val/100000000);
        let w = Math.floor((val%100000000)/10000);
        let yuan = (val%100000000)%10000;
        let html = '';
        if (y>0) {
            html += '<span style="color:#EA4747">'+y+'</span>亿'
        }
        if (w>0) {
           html += '<span style="color:#EA4747">'+w+'</span>万' 
        }
        html += '<span style="color:#EA4747">'+yuan+'</span>元' 
        return html;
    },
  },
  created(){
    let id = this.$route.params.id;
    let pid = this.$route.params.pid;
    this.id = id;
    this.title = this.lotteryId[id][0];
    this.getPidList(id);
    if (this.zxList.indexOf(id)>-1) {
        this.getHotNewList4(this.lotteryId[id][3])
    }
    this.loginImg = require('../../assets/img/'+this.id+'.png')
  },
  mounted(){
  }
};

</script>
<style lang="less" scoped>
@import '../../assets/style/detailIndex.less';
</style>
